<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .preview_img {
            width: 500px;
            height: 285px;
            position: relative;
            cursor: move;
            margin: 0 auto;
        }
        
        .preview_img>img {
            width: 100%;
        }
        
        .mask {
            display: none;
            position: absolute;
            width: 250px;
            height: 250px;
            background-color: yellow;
            opacity: 0.5;
        }
        
        .big {
            display: none;
            position: absolute;
            left: 50px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            border: 5px solid gray;
        }
        
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="preview_img">
        <img src="./001.jpg" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="./001.jpg" alt="" style="width: 800px;" class="bigImg">
        </div>
    </div>
    <script>
        var preview_img = document.querySelector('.preview_img');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        // 1. 当我们鼠标经过preview_img 就显示和隐藏mask遮挡层和big大盒子
        preview_img.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })

        // 2. 鼠标移动的时候，让黄色的盒子跟鼠标来走
        preview_img.addEventListener('mousemove', function(e) {
            // (1)先计算出鼠标在盒子内的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // (2)mask.offsetWidth减去盒子的一半
            console.log(x, y);

            // (3)mask移动的距离
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            // (4)如果x坐标小于0就让他停在0的位置
            var maskMax = preview_img.offsetWidth - mask.offsetWidth;
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax;
            };
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= preview_img.offsetHeight - mask.offsetHeight) {
                maskY = preview_img.offsetHeight - mask.offsetHeight;
            };
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
            // 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
            var bigImg = document.querySelector('.bigImg');
            // 大图片最大移动距离
            var bigMax = bigImg.offsetWidth - big.offsetWidth;
            // 大图片距离
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';

        })
    </script>
</body>

</html>